import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Button, Flex, Icon, InputItem, List, Toast } from 'antd-mobile'
import './style.less'
import { ReturnHeader } from '../header'
import { createForm } from 'rc-form'
import { TimerButton } from '../wrapper'
import { config, myFetch, helper } from 'appRoot/components/utils'

class RegisterForm extends Component {
  render() {
    const { getFieldProps } = this.props.form
    return (
    	<List className="rt-register-list">

    	  <ReturnHeader title="注册账户"/>

        <InputItem
          type="phone"
          className="rt-register-padding"
          clear
          {...getFieldProps('mobile', {
            initialValue: '',
          })}
          placeholder="请输入手机号码"
        />
        <InputItem
          className="cm-verify-input-width"
          placeholder="请输入收到的验证码"
          {...getFieldProps('verify', {
            initialValue: '',
          })}
          clear
          type="number"
          maxLength={6}
        />

        <TimerButton
          ref="tb"
          styleClass="cm-verify-btn-width cm-register-top"
          interval={60}
          maxLength={6}
          text="获取验证码"
          disableVal={false}
          genre={{ val: 1, mobile: getFieldProps('mobile').value }}
        />
        <InputItem
          className="rt-register-padding "
          placeholder="请输入密码"
          type="password"
          clear
          {...getFieldProps('password', {
            initialValue: '',
          })}
          extra={<Icon type="rt-pw" />}
        />
        <Button className="btn rt-register-next" onClick={(e)=>this.register()} type="primary">下一步</Button>
    	</List>
    )
  }

  register() {
    const { getFieldProps, getFieldValue } = this.props.form
    const mobileNumber = getFieldValue('mobile').replace(/\s/g, '')
    const verifyCode = getFieldValue('verify')
    const password = getFieldValue('password')
    const passwordConfirmation = getFieldValue('password')
    if (!password || password.trim() === '') {
      Toast.fail('请填写密码', 2)
      return
    }

    const data = {
      mobileNumber, password, verifyCode,
      passwordConfirmation
    }

    // 注册执行动作
    Toast.loading('正在提交...', 10, () => {
      Toast.fail('提交失败！')
    })

    const options = {
      method: 'POST',
      body: JSON.stringify(data)
    }
    myFetch(`${config.rootApi}/user/signup`, options)
      .then((rs) => {
        if (rs) {
          Toast.hide()
          if (rs.id) {
            // 执行登录操作
            const loginOption = {
              method: 'POST',
              body: JSON.stringify({
                username: mobileNumber,
                password: password
              })
            }
            myFetch(`${config.rootApi}/user/login`, loginOption)
              .then((res) => {
                if (res && res.value) {
                  sessionStorage.setItem('token', res.value)
                  sessionStorage.setItem('mobile', mobileNumber)
                  hashHistory.push('/authentication')
                }
              })
            Toast.success('注册成功')
          }
        }
      })

  }
}

export default createForm()(RegisterForm)